<!DOCTYPE html>
<html>
<head>

	<title>InfoBox</title>
	
    <!-- Google Maps API -->
    <script type="text/javascript" 
		 src="http://maps.google.com/maps/api/js?v=3.5&sensor=false">
    </script> 
    
    <!-- InfoBox -->
    <script type="text/javascript"
			src="infobox.js">
    </script>
    
    <script type="text/javascript">
        function initialize() {
            var secheltLoc = new google.maps.LatLng(49.47216, -123.76307);
    
			// Kartenoptionen
            var myMapOptions = {
                 zoom: 15
                ,center: secheltLoc
                ,mapTypeId: google.maps.MapTypeId.ROADMAP
            };
			
			// Karte
            var theMap = new google.maps.Map(document.getElementById("map_canvas"), myMapOptions);
    
    		// Marker + InfoBox
            var marker = new google.maps.Marker({
                map: theMap,
                draggable: true,
                position: new google.maps.LatLng(49.47216, -123.76307),
                visible: true
            });
    
            var boxText = document.createElement("div");
            boxText.style.cssText = "border: 1px solid black; margin-top: 8px; background: #FFEEFF; padding: 5px;";
            boxText.innerHTML = "City Hall, Sechelt<br>British Columbia<br>Canada";
    
			// InfoBox Eigenschaften
            var myOptions = {
                 content: boxText
                ,disableAutoPan: false
                ,maxWidth: 0
                ,pixelOffset: new google.maps.Size(-240, 0)
                ,zIndex: null
                ,boxStyle: { 
                  background: "url('tipbox.gif') no-repeat"
                  ,opacity: 0.75
                  ,width: "480px"
                 }
                ,closeBoxMargin: "10px 2px 2px 2px"
                ,closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif"
                ,infoBoxClearance: new google.maps.Size(1, 1)
                ,isHidden: false
                ,pane: "floatPane"
                ,enableEventPropagation: false
            };
    
			// ActionListener --> Click
            google.maps.event.addListener(marker, "click", function (e) {
                ib.open(theMap, this);
            });
    		
			// Marker mit InfoBox öffnen
            var ib = new InfoBox(myOptions);
            ib.open(theMap, marker);
        }
    </script>


</head>

<body onload="initialize()">

	<div id="map_canvas" style="width: 100%; height: 400px">
    
    </div>
	
</body>

</html>
